<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MCU定时任务管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <style>
        .container {
            padding: 20px;
            background-color: #f5f7fa;
            min-height: 100vh;
        }

        .section-card {
            background: #fff;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-body {
            padding: 20px;
        }

        .slider-block {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .slider-label {
            width: 120px;
            color: #606266;
        }

        .slider-value {
            width: 80px;
            margin-left: 15px;
            color: #409EFF;
        }

        .task-status-success {
            color: #67C23A;
        }

        .task-status-error {
            color: #F56C6C;
        }

        .task-status-pending {
            color: #E6A23C;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <el-tabs v-model="activeTab" type="border-card">
            <!-- 任务列表和配置 -->
            <el-tab-pane label="任务列表和配置" name="taskList">
                <el-card class="section-card">
                    <div slot="header" class="card-header">
                        <span>任务配置</span>
                        <el-button type="primary" size="small" @click="handleAddTask">
                            <i class='bx bx-plus'></i> 新增任务
                        </el-button>
                    </div>
                    <div class="card-body">
                        <!-- 任务列表 -->
                        <el-table :data="tasks" style="width: 100%">
                            <el-table-column prop="id" label="任务ID" width="100"></el-table-column>
                            <el-table-column prop="name" label="任务名称"></el-table-column>
                            <el-table-column prop="type" label="任务类型" width="150">
                                <template slot-scope="scope">
                                    <el-tag>{{scope.row.type}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sensorType" label="传感器类型" width="150">
                                <template slot-scope="scope">
                                    <el-tag>{{scope.row.sensorType}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status === '运行中' ? 'success' : 'warning'">
                                        {{scope.row.status}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button-group>
                                        <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 添加任务弹出框 -->
                        <el-dialog title="添加任务" :visible.sync="dialogVisible" width="30%">
                            <el-form :model="taskForm" label-width="80px">
                                <el-form-item label="任务名称">
                                    <el-input v-model="taskForm.name"></el-input>
                                </el-form-item>
                                <el-form-item label="任务类型">
                                    <el-select v-model="taskForm.taskType" placeholder="请选择任务类型">
                                        <el-option label="定时数据采集" value="定时数据采集"></el-option>
                                        <el-option label="告警数据上报" value="告警数据上报"></el-option>
                                        <el-option label="设备状态检测" value="设备状态检测"></el-option>
                                        <el-option label="自动控制任务" value="自动控制任务"></el-option>
                                        <el-option label="自动校时任务" value="自动校时任务"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="传感器">
                                    <el-select v-model="taskForm.sensorType" placeholder="请选择传感器类型">
                                        <el-option label="温度传感器" value="temperature"></el-option>
                                        <el-option label="湿度传感器" value="humidity"></el-option>
                                        <el-option label="CO2传感器" value="co2"></el-option>
                                        <el-option label="光照传感器" value="light"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="submitTask">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                </el-card>
            </el-tab-pane>

            <!-- 任务监控 -->
            <el-tab-pane label="任务监控" name="taskMonitor">
                <el-card class="section-card">
                    <div slot="header" class="card-header">
                        <span>任务执行详情</span>
                        <el-button-group>
                            <el-button size="small" type="primary" @click="refreshMonitor">
                                <i class='bx bx-refresh'></i> 刷新
                            </el-button>
                            <el-button size="small" @click="clearHistory">
                                <i class='bx bx-trash'></i> 清空历史
                            </el-button>
                        </el-button-group>
                    </div>
                    <div class="card-body">
                        <el-table :data="taskExecutions" style="width: 100%">
                            <el-table-column prop="taskId" label="任务ID" width="100"></el-table-column>
                            <el-table-column prop="taskName" label="任务名称"></el-table-column>
                            <el-table-column prop="executionTime" label="执行时间" width="180"></el-table-column>
                            <el-table-column prop="result" label="执行结果" width="120">
                                <template slot-scope="scope">
                                    <span :class="{
                                        'task-status-success': scope.row.result === '成功',
                                        'task-status-error': scope.row.result === '失败',
                                        'task-status-pending': scope.row.result === '执行中'
                                    }">
                                        <i :class="{
                                            'bx bx-check': scope.row.result === '成功',
                                            'bx bx-x': scope.row.result === '失败',
                                            'bx bx-loader bx-spin': scope.row.result === '执行中'
                                        }"></i>
                                        {{scope.row.result}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="details" label="详细信息"></el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        Vue.use(ELEMENT);

        new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'taskList',
                    tasks: [
                        {id: 1, name: '温度监测', type: '定时数据采集', sensorType: '温度传感器', status: '运行中'},
                        {id: 2, name: '湿度监测', type: '定时数据采集', sensorType: '湿度传感器', status: '已停止'},
                        {id: 3, name: 'CO2监测', type: '定时数据采集', sensorType: 'CO2传感器', status: '运行中'}
                    ],
                    dialogVisible: false,
                    taskForm: {
                        name: '',
                        taskType: '',
                        sensorType: ''
                    },
                    taskExecutions: [
                        {taskId: 1, taskName: '温度监测', executionTime: '2024-02-20 10:00:00', result: '成功', details: '温度: 25°C'},
                        {taskId: 2, taskName: '湿度监测', executionTime: '2024-02-20 10:00:00', result: '失败', details: '设备离线'},
                        {taskId: 3, taskName: 'CO2监测', executionTime: '2024-02-20 10:00:00', result: '成功', details: 'CO2: 400ppm'}
                    ]
                }
            },
            methods: {
                handleAddTask() {
                    this.dialogVisible = true;
                },
                submitTask() {
                    // 这里添加提交任务的逻辑
                    const newTask = {
                        id: this.tasks.length + 1,
                        name: this.taskForm.name,
                        type: this.taskForm.taskType,
                        sensorType: this.taskForm.sensorType,
                        status: '运行中'
                    };
                    this.tasks.push(newTask);
                    this.dialogVisible = false;
                    this.taskForm.name = '';
                    this.taskForm.taskType = '';
                    this.taskForm.sensorType = '';
                    this.$message.success('添加任务成功');
                },
                handleEdit(task) {
                    this.$message({
                        message: '编辑任务功能开发中...',
                        type: 'info'
                    });
                },
                handleDelete(task) {
                    this.$confirm('确认删除该任务?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                refreshMonitor() {
                    this.$message({
                        message: '刷新任务监控...',
                        type: 'info'
                    });
                },
                clearHistory() {
                    this.$confirm('确认清空历史记录?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '清空成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消清空'
                        });
                    });
                }
            }
        });
    </script>
</body>
</html>